<!DOCTYPE html>
<html>
<head>
	<title>Vue处理边界的情况-访问根实例</title>
	<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
	<h3>{{foo}}</h3>
	
	<h3>{{this.$root.bar}}</h3>
	<h3>{{this.$root.baz()}}</h3>
	<h1>
		{{this.$root.foo}}
	</h1>
</div>
</body>

</html>
<script type="text/javascript">
	new Vue({
	  el:'#app',
	  data: {
	    foo: 1
	  },
	  computed: {
	    bar: function () { 
	    	return "bar"
	    }
	  },
	  methods: {
	    baz: function () { 
	    	this.$root.foo = 2
	    	return "baz"
	    }
	  }
	})
</script>

<style type="text/css">
	
</style>